<template>
  <el-header height="120px" style="padding: 0" class="head">
    <div class="main">
      <div class="img"><img src="../assets/1.jpg" alt="" /></div>
      <div class="nvan">
        <router-link to="/home">首页</router-link><el-divider direction="vertical"></el-divider>
        <router-link to="/course">课程</router-link><el-divider direction="vertical"></el-divider>
        <router-link exact to="/teacher">讲师</router-link><el-divider direction="vertical"></el-divider>
        <router-link exact to="#1">文章</router-link><el-divider direction="vertical"></el-divider>
        <router-link exact to="#2">问答</router-link>
      </div>
      <div class="input"> <el-input suffix-icon="el-icon-search" placeholder="请搜索课程" icon="el-icon-serarch" ></el-input></div>
      <div class="login" v-if="userInfo" >
        <el-dropdown trigger="click" szie="mine">
            <span>
                <img  class="user" src="@/assets/2.jpg" style="40px;width: 40px; border-radius:50% ">
            </span>
            <span style="position: absolute;width: 90px;overflow: hidden;margin-top:10px;margin-left:-10px" >用户:{{userInfo.nickname}}</span>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
              </el-dropdown>
    </div>
      <div class="login2" v-if="!userInfo">
          <i class="el-icon-user" style="margin-right:8px;font-size: 18px;"></i>
          <router-link to="/login" style="color:#6c6c6c;">登录</router-link><el-divider direction="vertical"></el-divider>
          <router-link to="/register" style="color:#6c6c6c;">注册</router-link>
      </div>
    </div>
  </el-header>
</template>
<script>
import LoginApi from '@/api/login';
import cookie from 'js-cookie'
export default {
       data(){
        return {
          userInfo:null
        }
       },
       created(){
        console.log("dasdasdasdasd")
        this.getUser();
       },
       methods: {
        getUser(){
          if(!cookie.get("jwt-token")){
             return ;
          }
          LoginApi.getUserInfo().then(res=>{
            if(res.code!==20000){ //如果解析错误
              cookie.set("jwt-token","",{domain:'localhost'});//写入空cookie
            }
            else{
            this.userInfo=res.data.info;//拉取数据
            }
          })
        },
        logout(){
          cookie.set("jwt-token","",{domain:'localhost'});//写入空cookie
          
          this.userInfo=null;//重置数据
            
        }
       }
}
</script>
<style scoped>
.nvan .router-link-active {
    color:#68cb9b;
    text-decoration: underline #68cb9b;
}
a:hover{
  color: #68cb9b;
  text-decoration: underline #68cb9b;
}
.img {
  position: absolute;
  margin-top: 25px;
  height: 200px;
  width: 400px;
}
.login{
    position: absolute;
    margin-top: 45px;
    margin-left: 1400px;
}
.login2{
    position: absolute;
    margin-top: 52px;
    margin-left: 1400px;
}
.nvan a{ 
    font-size: 22px;
    color:#6c6c6c;
    height: 20px;
    margin-left: 45px;
}
.nvan a:hover{
  color: #68cb9b;
}
.nvan{
    position: absolute;
    margin-top: 52px;
    margin-left: 400px;
}
.input{
    width: 150px;
    position: absolute;
    margin-top: 46px;
    margin-left: 1190px;
}
</style>